<template>
  <tbc-dialog ref="dialog" title="高级搜索" width="900px">
    <el-form label-position="top" class="compact">
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="订单号">
            <el-input v-model="filter.order_sn" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="订单状态">
            <el-select placeholder="订单状态" v-model="filter.order_status" style="width: 100%">
              <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in [{value: '', label: '全部'},{value: 1100, label: '待支付'},{value: 1200, label: '已取消'},{value: 1300, label: '已支付'},{value: 1400, label: '备货中'},{value: 1401, label: '分拣中'},{value: 1490, label: '已发货'},{value: 1500, label: '退款中'},{value: 1510, label: '已退款'},{value: 9100, label: '交易完成'},{value: 9001, label: '充值成功'}]"
                  :key="item.value"></el-option>
            </el-select>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="订单商品">
            <el-input placeholder="商品" readonly v-model="goodsName" @focus="$refs.goods.show()">
              <template v-slot:append>
                <el-button  icon="el-icon-search" @click="$refs.goods.show()">选择</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="下单用户">
            <el-input placeholder="用户" readonly v-model="nickName" @focus="$refs.user.show()">
              <template v-slot:append>
                <el-button  icon="el-icon-search" @click="$refs.user.show()">选择</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="支付方式">
            <el-select v-model="filter.pay_type" style="width: 100%">
              <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, idx) in [
                      {value: 0, label: '全部'},
                      {value: 1, label: '支付宝'},
                      {value: 2, label: '微信'}]"
                  :key="idx">
                {{ item.label }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="支付流水号">
            <el-input v-model="filter.out_trade_no"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">

        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="下单时间">
            <date-picker type="datetimerange" v-model="orderSection" style="width: 100%;"></date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付时间">
            <date-picker type="datetimerange" v-model="paySection" style="width: 100%;"></date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="发货时间">
            <date-picker type="datetimerange" v-model="shippingSection" style="width: 100%;"></date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="完成时间">
            <date-picker type="datetimerange" v-model="completeSection" style="width: 100%;"></date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="退款时间">
            <date-picker type="datetimerange" v-model="shippingSection" style="width: 100%;"></date-picker>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template v-slot:footer>
      <div style="text-align: right;margin-top: 10px">
        <el-button icon="el-icon-refresh" @click.stop="reset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click.stop="doSearch">搜索</el-button>
      </div>
    </template>
  </tbc-dialog>
</template>
<script lang="ts">
import {defineComponent, reactive, Ref, ref, toRefs} from 'vue'

export default defineComponent({

  name: 'order-advanced-search',

  setup(props, {emit}) {
    const dialog: Ref = ref(null)
    const state = reactive({
      filter: {
        keyword: '',
        sale_status: 0,
        min_price: '',
        max_price: '',
        cat_id: '',
        goods_type: '',
        use_integral_type: 0
      },
      filterInit: {
        keyword: '',
        sale_status: 0,
        min_price: '',
        max_price: '',
        cat_id: '',
        goods_type: '',
        use_integral_type: 0
      }
    })
    const show = (data: { [k: string]: string | number }): void => {
      // for (let i in data) state.filter[i] = data[i]
      state.filter = {...state.filter, ...data}
      dialog.value.show()
    }

    const close = (): void => {
      dialog.value.close()
    }

    const reset = (): void => {
      state.filter = {...state.filter, ...state.filterInit}
      // for (let i in state.filterInit) state.filter[i] = state.filterInit[i]
    }

    const doSearch = (): void => {
      emit('search', state.filter)
      close()
    }

    return {
      ...toRefs(state),
      dialog,
      show,
      reset,
      doSearch
    }
  }
})
</script>